<template>
  <div class="user-chat">
    <van-nav-bar
      title="小智同学"
      left-arrow
      class="app-nav-bar"
      @click-left='$router.back()'
    />
    <van-cell-group class="message-list" ref="message-list">
      <van-cell :title="item.msg"  v-for="(item, index) in messages" :key="index"/>
    </van-cell-group>

    <van-cell-group class="send-message-wrap">
      <van-field v-model="message"  placeholder="请输入消息" />
      <van-button size="small" type="primary" class="send-button" @click="onSend">发送</van-button>
    </van-cell-group>

  </div>
</template>

<script>
import io from 'socket.io-client'
// 建立连接
// socket.on('connect', function () {
//   console.log('建立成功了....')
// })
// 发送消息
// socket.emit('事件(接口规定)', '消息内容')
// socket.emit('消息类型', '消息内容')
// this.socket.emit('message', {
//           msg: message,
//           timestamp: Date.now()
//         })
// 接收消息
// socket.on('消息类型', funciton (data) { data消息})

// 断开连接了
// socket.on('disconnect', function () {
//   console.log('断开连接了....')
// })
// window.socket = socket

export default {
  name: 'UserChat',
  components: {},
  props: {},
  data () {
    return {
      message: '',
      socket: null, // websocket 通讯对象
      messages: [
        { msg: '单元格', timestamp: 1111223131312312 },
        { msg: '单元格', timestamp: 1111223131312312 },
        { msg: '单元格', timestamp: 1111223131312312 },
        { msg: '单元格', timestamp: 1111223131312312 },
        { msg: '单元格', timestamp: 1111223131312312 },
        { msg: '单元格', timestamp: 1111223131312312 },
        { msg: '单元格', timestamp: 1111223131312312 },
        { msg: '单元格', timestamp: 1111223131312312 },
        { msg: '单元格', timestamp: 1111223131312312 },
        { msg: '单元格', timestamp: 1111223131312312 },
        { msg: '单元格', timestamp: 1111223131312312 }
      ] // 消息列表数据
    }
  },
  computed: {},
  watch: {
    messages () {
      this.$nextTick(() => {
        this.scrollToBottom()
      })
    }
  },
  mounted () {
    this.socket = io('http://ttapi.research.itcast.cn')
    // 建立连接
    this.socket.on('connect', function () {
      console.log('建立成功了....')
    })
    // 接收消息
    this.socket.on('message', function (data) {
      // 把对方发送给我的信息push到message中
      this.messages.push(data)
    })
    this.scrollToBottom()
  },
  methods: {
    onSend () {
      const data = {
        msg: this.message,
        timestamp: Date.now()
      }
      this.socket.emit('message', data)
      // 把用户 发出去的消息push到messages中
      this.messages.push(data)
      this.message = ''
    },
    scrollToBottom () {
      const list = this.$refs['message-list']
      list.scrollTop = list.scrollHeight
    }
  }
}

</script>
<style lang='less' scoped>
.send-message-wrap {
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  display: flex;
  font-size: 14px;
  align-items: center;
  padding: 0 14px;
  .send-button {
    width: 50px;
  }
}
.message-list {
    position: fixed;
    top: 46px;
    bottom: 44px;
    left: 0;
    right: 0;
    overflow: auto;
  }
</style>
